<template>
  <div class="yd-detail">
    <mt-header :title="title">
      <router-link to="/yd/item/1" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="info-wrapper">
      <div class="yh">
        <h1>{{orderInfo.system_order_no}}</h1>
      </div>
      <div class="od-goods">
        <h1>商品</h1>
        <ul class="od-goods-ul">
          <li v-for="goods in goodslist">
            <p class="g-title">{{goods.goods_name}}</p>
            <p class="g-num">{{goods.total_num}}</p>
            <p class="g-money">￥{{goods.total_fee}}</p>
          </li>
        </ul>
        <div class="z-money">
          <h1>总金额</h1>
          <span>￥{{orderInfo.total_fee}}</span>
        </div>
      </div>
    </div>
    <div class="d-ren">
      <p>收货人姓名：{{orderInfo.name}}</p>
      <p>收货人电话：
        <a @click="call(orderInfo.phone)">{{orderInfo.receiver_phone}}</a>
      </p>
      <p>用餐人数&nbsp;&nbsp;&nbsp;&nbsp;：{{orderInfo.people}}</p>
      <p>用餐日期&nbsp;&nbsp;&nbsp;&nbsp;：{{orderInfo.eat_date}}&nbsp;&nbsp;{{orderInfo.eat_time}}</p>
      <p>备注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：{{orderInfo.content}}</p>
      <p>下单时间&nbsp;&nbsp;&nbsp;&nbsp;：{{orderInfo.order_time_str}}</p>
    </div>

    <div class="g-btn" v-if="btnShow">
      <mt-button class="btn-ju" type="default" @click="judan(orderInfo.id,orderInfo.system_order_no)">拒单</mt-button>
      <mt-button class="btn-jie" type="primary" @click="jiedan($event,orderInfo.id,orderInfo.system_order_no)">接单</mt-button>
    </div>
  </div>
</template>
<script>
import selected from 'components/common/selected.vue'
import uploadImg from 'components/common/uploadImg.vue'
import axios from 'axios'
import mySearch from 'components/common/mySearch.vue'
import { Toast } from 'mint-ui'
export default {
  data() {
    return {
      goodslist: [],
      orderInfo: '',
      title: '',
      orderid: '',
      btnShow: true
    }
  },
  mounted() {
    this.orderid = this.$route.params.id
    
    if(this.$route.params.status == '1'){
      this.btnShow = true
    }else{
      this.btnShow = false
    }
    //if(this.goodsid != 0){
    this.title = "订单详情"
    let token = localStorage.getItem("access_token");
    let params = { "access_token": token, "order_no": this.orderid }
    axios.post(HOST + "/Shop/order_detail_yd", params).then((res) => {
      res = res.data
      let result = res.result
      if (result == 'success') {
        for (let item of res.data.good_list) {
          this.goodslist.push(item)
        }
        this.orderInfo = res.data.order_info
      } else {
        Toast({
          message: res.message,
          position: 'bottom',
          duration: '2000'
        })
      }
    })
    //}
  },
  methods: {
    call(phone) {
      window.location.href = 'tel:' + phone
    },
    jiedan(event, id, orderno) {
      // if (!event._constructed) {
      //   return;
      // }
      let token = localStorage.getItem("access_token");
      let params = { "access_token": token, "order_no": orderno, "order_id": id }
      axios.post(HOST + "/Shop/accept_yd_order", params).then((res) => {
        res = res.data
        if (res.result == 'success') {
          Toast({
            message: res.message,
            position: 'bottom',
            duration: 2000
          });
          this.$router.replace('/yd/item2/2')
        } else {
          Toast({
            message: res.message,
            position: 'bottom',
            duration: 2000
          });
        }
      })
    },
    judan(id, orderno) {
      let token = localStorage.getItem("access_token");
      let params = { "access_token": token, "order_no": orderno, "order_id": id }
      let that = this;
      axios.post(HOST + "/Shop/refuse_order_yd", params).then((res) => {
        res = res.data
        if (res.result == 'success') {
          Toast({
            message: res.message,
            position: 'bottom',
            duration: 2000
          });
          that.currentPage = 1;
          that.initData()
        } else {
          Toast({
            message: res.message,
            position: 'bottom',
            duration: '2000'
          })
        }
      })
    },

  },
  components: {

  }
}
</script>

<style lang="stylus">
.yd-detail
  background:#f2f2f2
  height:100%
  width:100%
  position:absolute
  top:0
  left:0
  z-index:10
  .mint-header
    color:rgb(104, 104, 104)
    background:#26a2ff
    border-bottom:1px solid #ccc
    font-size:18px
    letter-spacing:2px
    box-shadow: 1px 3px 5px #eee
    color:#fff
    height 44px
    label,span
      color:#fff
  .g-btn
    clear:both
    margin 30px 10px 0 10px
    display:flex
    .btn-ju,.btn-jie
      height:35px
    .btn-ju
      flex:0 0 30%
    .btn-jie
      margin-left:10px
      flex:1
  .d-ren
    background:#fff
    padding:20px
    margin-top:5px
    p
      line-height:20px
      font-size:15px
      color:#333
      line-height: 30px;
      border-bottom: 1px dashed #f1f1f1;
  .info-wrapper
    background:white
    .yh
      display:flex
      border-bottom:1px solid #eee
      padding:10px 20px
      h1
        flex:1
        font-size:18px
        span
          font-size:10px
          padding:2px
          background:#ffc107
          color:#fff
          margin-left:5px
          border-radius:5px
      span
        flex:0 0 30px
        text-align:center
        font-size:20px
    .od-goods
      padding:20px
      h1
        color:#333
      .beiz
        background:#eee
        margin-top:10px
        padding:10px
        p
          font-size:12px
          margin-top:5px
          span
            color:#ffc107
      .od-goods-ul
        padding:10px 0
        li
          display:flex
          margin-bottom: 5px
          text-align:right
          color:#666
          p
            font-size:14px
          .g-title
            flex:1
            text-align:left
            font-size:13px
          .g-num
            flex:0 0 50px
          .g-money
            flex:0 0 70px
      .z-money
        padding-bottom:10px
        h1
          font-weight:normal
          float:left              
        span
          color:#ffc107
          float:right
      

</style>